<template>
  <div class="main-container">
    <div class="title">
      <div class="count">
        <span
          style="
            color: #333333;
            font-weight: normal;
            font-size: 14px;
            margin: 0;
            padding: 0;
          "
        >浏览量</span
        >
        <span style="font-size: 32px; font-weight: 500; margin-top: 30px"
        >{{config.look}}</span
        >
      </div>
      <div class="count">
        <span
          style="
            color: #333333;
            font-weight: normal;
            font-size: 14px;
            margin: 0;
            padding: 0;
          "
          >回收量</span
        >
        <span style="font-size: 32px; font-weight: 500; margin-top: 30px"
          >{{config.recycle}}</span
        >
      </div>
      <div class="count">
        <span
          style="
            color: #333333;
            font-weight: normal;
            font-size: 14px;
            margin: 0;
            padding: 0;
          "
        >预计耗时</span
        >
        <span style="font-size: 32px; font-weight: 500; margin-top: 30px"
        >{{ TTime }}</span
        >
      </div>
    </div>
    <div class="chart-container">
      <vue-echarts :option="getOptions()"></vue-echarts>
    </div>
  </div>
</template>

<script>
export default {
  name: 'totalCharts',
  props:['config'],
  data() {
    return {
    }
  },
  computed:{
    TTime(){
      let res = (this.config?this.config.model.length * 6:0) + Math.floor(Math.random() * 5)
      if(res / 60 < 1)
        return res + 's'
      else return (((res / 60)+"").split('.')[0]) + 'm' + (res % 60) + 's';
    }
  },
  methods: {
    getOptions() {
      return {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }],
        tooltip: {
          trigger: 'axis',
          formatter: (v) => {
            return `${ v[0].name }</br>回收量:${ v[0].data }`
          },
          backgroundColor: 'rgba(50,50,50,0.7)',
          textStyle: {
            color: '#fff'
          }
        }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.main-container {
  width: 100%;
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    .count {
      display: flex;
      flex-direction: column;
      margin-right: 30px;
    }
    .time {
      display: flex;
      flex-direction: column;
    }
  }
  .chart-container {
    width: 100%;
    height: 100%;
    .echarts {
      width: 800px;
      height: 400px;
    }
  }
}
</style>
